class Enlarge{
    constructor(el){
this.el=document.querySelector(el)
this.mask=this.el.querySelector('.mask')
this.img=this.el.querySelector('.img')
this.enlarge=this.el.querySelector('.enlarge')
this.init()

    }
    init(){
    //移入移出
    this.over()      
    //鼠标移动
    this.move()
    //等比
    this.enhw()
    //huantu
    this.ImgChange()


    }

    enlargeSetBg(left, top)
    {
        // div.enlarge bc left =    (div.enlarge w / div.mask w) *  div.mask left
        let enlargeW = parseFloat(this.getStyle(this.enlarge, 'width'))
        let enlargeH = parseFloat(this.getStyle(this.enlarge, 'height'))
        // console.log(enlargeW, enlargeH);
        
        let maskW = parseInt(this.getStyle(this.mask, 'width'))
        let maskH = parseInt(this.getStyle(this.mask, 'height'))

        let x = (enlargeW/maskW) * left
        let y = (enlargeH/maskH) * top

        this.enlarge.style.backgroundPosition = `-${x}px -${y}px`
    }
 
//获取 mask和enlaegen的宽高
getStyle(tagObj, attrName) 
{
    if (window.getComputedStyle)
    {
        // return window.getComputedStyle(tagObj).attrName
        return window.getComputedStyle(tagObj)[attrName]
    } else {
        // return tagObj.currentStyle.attrName
        return tagObj.currentStyle[attrNamea]  // 当对象的键是变量时，使用数组语法
    }
}


enhw() {
    
    let maskW = parseInt(this.getStyle(this.mask, 'width'))
    let maskH = parseInt(this.getStyle(this.mask, 'height'))

    let enlarge = this.getStyle(this.enlarge, 'background-size')
    let enlargeW = parseInt( enlarge.split(' ')[0])
    let enlargeH = parseInt( enlarge.split(' ')[1])

    let imgW = this.img.clientWidth
    let imgH = this.img.clientWidth

    this.enlarge.style.width = maskW * (enlargeW / imgW) + 'px'
    this.enlarge.style.height = maskH * (enlargeH / imgH)  + 'px'
}



    //鼠标移入移出 显示和隐藏
    over(){
    this.img.onmouseover=()=>{
        this.mask.style.display=this.enlarge.style.display='block'
    }
    this.img.onmouseout=()=>{
        this.mask.style.display=this.enlarge.style.display='none'
    }
    }

//鼠标移动
move(){
    this.img.onmousemove=(evt)=>{
     let e=evt || window.event  //获取事件
     //事件函数处理中
    let w=e.pageX-this.img.parentNode.offsetLeft-this.mask.offsetWidth/2
    let h=e.pageY-this.img.parentNode.offsetTop-this.mask.offsetHeight/2
    let wmax=this.img.offsetWidth-this.mask.offsetWidth
    let hmax=this.img.offsetHeight-this.mask.offsetHeight
    if(w<0){w=0}
    if(h<0){h=0}
    if(w>wmax){w=wmax}
    if(h>hmax){h=hmax}

    this.mask.style.left=w+'px'
    this.mask.style.top=h+'px'
    this.enlargeSetBg(w, h)
    }
}


//改变图片
ImgChange(){
    let liObjs=this.el.querySelectorAll('ul li')
    liObjs.forEach((item,index)=>{
        item.onclick=()=>{
            this.el.querySelector('ul li.active').className=''
            item.className='active'


            let num=Number(item.innerHTML.match(/\d/g).join(''))

            this.img.style.background=`url(./imgs/${num}.jpg)`
            this.enlarge.style.background=`url(./imgs/${num}.big.jpg) no-repeat`
            
        }
        
    })
}
}